<template>
  <view class="course-header">
      <image :src="props.course.mainImage"  class="img"></image>
      <view class="header-info">
        <view class="price-info" >
          <text v-if="props.course.isFree">免费</text>
          <block v-else>
            <text v-if="props.course.priceDiscount">￥{{props.course.priceDiscount}}</text>
            <text :class="{price:props.course.priceDiscount}">￥{{props.course.priceOriginal}}</text>
            <text v-if="props.course.priceDiscount" class="discounts">优惠价</text>
          </block>
        </view>
        
        <view class="title">
          {{props.course.title}}
        </view>
        
        <view class="count">
          <text class="iconfont icon-haoping2">{{props.course.goodRate}}%好评</text>
          <text class="iconfont icon-touxiang2">{{props.course.studyTotal}}人在学</text>
        </view>
        
      </view>
  </view>
</template>

<script setup lang="ts">
  const props = defineProps({
    course:{
      type:Object,
      default:()=>({
        mainImage:"https://tse1-mm.cn.bing.net/th/id/R-C.cdfc0a6a03fd1e6e36672304c97c2d9e?rik=Lv9rBUfYVEoicw&riu=http%3a%2f%2fassets.kgc.cn%2fupload%2ffile%2f20161121%2f1479730958391071.jpg&ehk=%2bHbngVQdswX5qcqwf8ITSlr46Yb3GkRC0vruohFxXN8%3d&risl=&pid=ImgRaw&r=0",
        priceDiscount:390,
        priceOriginal:1000,
        title:"jaksjdkjaskj",
        goodRate:98,
        studyTotal:741
      })
    }
  })
</script>

<style lang="scss" scoped>
  .course-header{
    .img{
      width: 750rpx;
      height: 420rpx;
    }
    .header-info{
      padding: 25rpx;
      background-color: #fff;
      border: 25rpx solid $mxg-color-grey;
      border-left: 0;
      border-right: 0;
      .price-info{
        text{
          margin-right: 15rpx;
          &:first-child{
            color: $mxg-text-color-red;
            font-size: 46rpx;
            font-weight: bold;
          }
        }
        .price{
          color: #b6bbbf;
          font-size: 30rpx;
          text-decoration: line-through;
        }
        .discounts{
          font-size: 20rpx;
          color:  $mxg-text-color-red;
          border: 1px solid  $mxg-text-color-red;
          border-radius: 10rpx;
          padding: 0 3rpx;
        }
      }
      
      .title{
        font-size: 35rpx;
        font-weight: bold;
        color: #1d1d1f;
        padding-left: 8rpx;
      }
      
      .count{
        padding: 15rpx;
        text{
          margin-right: 25rpx;
          font-size: 20rpx;
          color: #7d828f;
          background-color: $mxg-color-grey;
          padding: 15rpx;
          border-radius: 30rpx;
        }
      }
      
    }
  }
</style>